/* 
    Document   : main
    Created on : Nov 5, 2012, 10:55:51 AM
    Author     : DX
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}

body{
    background: url("../images/noise.png") repeat scroll 0 0 transparent;
    color: #4B4740;
    position: relative;
} 



header {
    background: rgba(38, 38, 38, 0.9);
    border-bottom: 6px solid #A5151E;
    height: 30px;
    margin-bottom: 20px;
    padding: 0px 0 5px 20px;
    position: relative;
} 

header ul { width: 1000px; height: 20px; margin: 0 auto;}

header ul li { float: right; margin-left: 20px; margin-bottom: 10px; }

header ul li p { font-weight: bold; color: #ccc; font-size: 15px;}

header ul li p:hover { color: #f59d56; cursor: pointer; } 

header ul li a { font-weight: bold; color: #ccc; font-size: 15px;text-decoration: none;}

header ul li a:hover { color: #f59d56; cursor: pointer; } 


#Mainpanel
{
    width: 1050px;
    position: relative;  
    margin: 0 auto;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 1px 4px #CCCCCC;
    margin-bottom: 30px;
}

#logo{
    float: left;
    width: 200px;
}

#logo img{
    width: 200px;
    height: 150px;
}

#search{
    margin-left: 20px;
    margin-top: 40px;
    float: left; 
}

#search .text1{
    margin-left: 50px;
    display: inline;
    float: left;
    font: bold 15px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
}

#search .textArea{
    width: 600px;
    height: 50px;
    border: 1px solid #EEEEEE;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 1px 4px #CCCCCC;
    font: bold 30px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
    margin-top: 3px;
}

#search .searchButton{
    width: 100px;
    height: 60px;
    border-radius: 10px 10px 10px 10px;
    font: bold 25px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
}


#search select{
    margin-top: 16px;
    border:1px solid #cccccc;
    float: left;
    display: inline;
}

#search select:hover{
    border:1px solid #666666;
}


#Mainpanel2{
    width: 1050px;
    position: relative;  
    margin: 0 auto;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 1px 4px #CCCCCC;
    margin-bottom: 30px;
}

#List
{
    width: 280px;
    height: 500px;
    float: left;
    margin-top: 30px;
    margin-left: 40px;
    margin-bottom: 30px;
    z-index: 2000;
}

#Categories
{
    width: auto;
    height: auto;
    position: absolute;
    overflow: visible;
    z-index: 20000;
}

#description
{
    background: url("../images/adds.png") no-repeat scroll 0 0 transparent;
    background-position: -700px 0px;
    width: 700px;
    height: 500px;
    overflow: hidden;
    float: left;
    position: relative;
    margin-top: 30px;
    margin-right: 20px;
    border: 1px solid #EEEEEE;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 1px 4px #CCCCCC;
    z-index: 100;
}

#AddSelect{
    width: 150px;
    height: 80px;
    margin: 0 auto;
    margin-top: 400px;
}

#AddSelect .Additem{
    width: 30px;
    height: 30px;
    margin-left: 10px;
    float: left;
    border: 1px solid #EEEEEE;
    border-radius: 10px 10px 10px 10px;
    background-color: #FFFFFF;
    text-align: center;
    font: bold 20px "Algerian", Verdana, Arial, Helvetica, sans-serif; 
}

#recommendList{
    width: 980px;
    height: 320px;
    overflow: hidden;
    position: relative;
    margin-left: 40px;
    margin-bottom: 30px;
    border: 1px solid #EEEEEE;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 1px 4px #CCCCCC;
    z-index: 100;
    
}

#recommendList h2,#hotList h2{
    color: #E47911;
    padding: 0;
    font-weight: bold;
    line-height: 1.4em;
    font-family: arial,helvetica,sans-serif ;
    margin-left: 30px;   
}

#recommendList h1,#hotList h1{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 225%;
    color: #E47911;
    letter-spacing: -0.03em;
    margin: 0;
    border-bottom:1px dotted #D3D3D3;   
    padding: 0 0 6px 0;
}

#hotList{
    width: 980px;
    height: auto;
    overflow: hidden;
    position: relative;
    margin-left: 40px;
    margin-bottom: 30px;
    border: 1px solid #EEEEEE;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 1px 4px #CCCCCC;
    z-index: 100;
}

#big
{
    width: 250px;
    height: 500px;
    float: left;
    position: relative;
    border: 1px solid #EEEEEE;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 1px 4px #CCCCCC;
    overflow:hidden;
}

#big table{
    width: 250px;
}

#big table thead{
    font:25px "Algerian", Verdana, Arial, Helvetica, sans-serif; 
    color: #E47911;
    text-align: left;
}

#big table tbody tr td {
    text-align: center;
    border: 1px solid #EEEEEE;
    border-radius: 10px 10px 10px 10px;
    font: 20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
    padding-top: 3px;
    padding-bottom: 3px;
}

#big table tbody tr td a{
    text-decoration: none;
    color: #000000;
}

.small
{
    width: 500px;
    height: 500px;
    float: left;
    position: relative;
    margin-left: 10px;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 1px 4px #CCCCCC;
    overflow: visible;
    display: none;
}

.small h2{
    color: #E47911;
    padding: 0;
    font-weight: bold;
    line-height: 1.4em;
    font-family: bold arial,helvetica,sans-serif ;
    margin-left: 30px; 
    font-size: 30px;
}

.small a{
    color: #000000;
    padding: 0;
    line-height: 1.4em;
    font-family: arial,helvetica,sans-serif ;
    margin-left: 30px;  
    margin-bottom: 10px;
    font-size: 20px;
    text-decoration: none;
}

.small a:hover{
    color:  darkorange;
}

#small{
    background: url("../images/FOOD.jpg") no-repeat scroll 0 0;
    background-color: #FFFFFF;
    background-position: 100% 0%;
    background-size: 50% 100%;
}

#small1{
    background: url("../images/MACHINE.jpg") no-repeat scroll 0 0;
    background-color: #FFFFFF;
    background-position: 100% 0%;
    background-size: 60% 100%;
}

#small2{
    background: url("../images/MEDICINE.jpg") no-repeat scroll 0 0;
    background-color: #FFFFFF;
    background-position: 100% 0%;
    background-size: 60% 100%;
}

#small3{
    background: url("../images/BOOKS.jpg") no-repeat scroll 0 0;
    background-color: #FFFFFF;
    background-position: 100% 0%;
    background-size: 60% 100%;
}

#small4{
    background: url("../images/TOOLS.jpg") no-repeat scroll 0 0;
    background-color: #FFFFFF;
    background-position: 100% 0%;
    background-size: 60% 100%;
}

#small5{
    background: url("../images/CLOTHES.jpg") no-repeat scroll 0 0;
    background-color: #FFFFFF;
    background-position: 100% 0%;
    background-size: 60% 100%;
}

#small6{
    background: url("../images/PITTSBURGH.jpg") no-repeat scroll 0 0;
    background-color: #FFFFFF;
    background-position: 100% 0%;
    background-size: 60% 100%;
}

#small7{
    background: url("../images/PHILADELPHIA.jpg") no-repeat scroll 0 0;
    background-color: #FFFFFF;
    background-position: 100% 0%;
    background-size: 100% 100%;
}

#small8{
    background: url("../images/YORK.jpg") no-repeat scroll 0 0;
    background-color: #FFFFFF;
    background-position: 0% 60%;
    background-size: 100% 100%;
}

#small9{
    background: url("../images/WILLIAMPORT.jpg") no-repeat scroll 0 0;
    background-color: #FFFFFF;
    background-position: 0% 100%;
    background-size: 100% 100%;
}

#small10{
    background: url("../images/SCRANTON.jpg") no-repeat scroll 0 0;
    background-color: #FFFFFF;
    background-position: 100% 100%;
    background-size: 60% 60%;
}

#test
{
    width: 1000px;
    word-break:break-all;
    overflow:auto;
}

#backgroundPopup{   
    display:none;   
    position:fixed;   
    _position:absolute; /* hack for internet explorer 6*/  
    height:100%;   
    width:100%;   
    top:0;   
    left:0;   
    background:#000000;   
    border:1px solid #cecece;   
    z-index:30000;   
}   
#popupContact{   
    display:none;   
    position:fixed;   
    _position:absolute; /* hack for internet explorer 6*/  
    height:384px;   
    width:408px;   
    background:#FFFFFF;   
    border:2px solid #cecece;   
    z-index:35000;   
    padding:12px;   
    font-size:13px;   
}   
#popupContact h1{   
    text-align:left;   
    color:#6FA5FD;   
    font-size:22px;   
    font-weight:700;   
    border-bottom:1px dotted #D3D3D3;   
    padding-bottom:2px;   
    margin-bottom:20px;   
}   
#popupContactClose{   
    font-size:14px;   
    line-height:14px;   
    right:6px;   
    top:4px;   
    position:absolute;   
    color:#6fa5fd;   
    font-weight:700;   
    display:block;  
    cursor: pointer;
}   

.sublist{
    width: 960px;
    height: 320px;
    overflow: hidden;
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
}


.item{
   width: 150px; 
   height: 270px;
   float: left;
   margin-left: 30px;
   cursor: pointer;
}

.item .pic{
    position: relative;
    width: 150px; 
   height: 170px;
}

.item .des{
    width: 150px;
    height: 80px;
    margin-top: 10px;
}

.item img{
   width: 150px; 
   height: 170px;
}

.item p{   
    text-align: center;
    font:bold 15px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
}
